<template>
  <div>
    <s-table
      :columns="columns"
      :data-source="dataSource"
      v-model:pagination="pagination"
      :scroll="{ y: 500, x: 2000 }"
    ></s-table>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      columns: [
        {
          title: 'Full Name',
          dataIndex: 'name',
          fixed: 'left',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          resizable: true,
        },
        {
          title: 'Column 1',
          dataIndex: 'address',
          resizable: true,
          rowDrag: true,
        },
        {
          title: 'Column 2',
          dataIndex: 'address',
          rowDrag: true,
        },
        {
          title: 'Column 3',
          dataIndex: 'address',
          rowDrag: true,
        },
        {
          title: 'Column 4',
          dataIndex: 'address',
        },
        {
          title: 'Column 4',
          dataIndex: 'address',
        },
        { title: 'Column 5', dataIndex: 'address' },
      ],
      dataSource: [
        {
          key: 1,
          name: `1`,
          age: 11,
          address: 1,
        }, {
          key: 2,
          name: `222`,
          age: 222,
          address: 222,
        }, {
          key: 3,
          name: `333`,
          age: 11,
          address: 111,
        },
      ],
      pagination: {
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `Total ${total} items`,
        pageSize: 40,
      }

    }
  },
  created() { },
  mounted() { },
  methods: {},
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
